<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--?限制在一定时间内重复触发同一事件的次数，从而减少不必要的计算和网络请求，提高页面性能和用户体验-->
<!--?实现防抖的方法是在事件触发时设置一个定时器，在规定的时间内，如果事件再次触发，则清除之前的定时器并重新设置一个新的定时器。如果在规定时间内没有再次触发事件，则执行事件处理函数。-->
<script>
<!--?    同一时间内多次触发同一事件，只会触发一次-->
function debounce(fn,delay) {
    let timer = null
    return function (...args) {
        console.log('???',this);
        if (timer) {
            clearTimeout(timer)
            timer = null
        }
        timer = setTimeout(() => {
            fn.call(this,...args)
        },delay)
    }
}
function testDebounce() {
    console.log('debounce test start');
    const debounceFunc = debounce(function() {
        console.log('debounce function called');
    }, 1000);
    debounceFunc();
    setTimeout(debounceFunc, 500);  //? 被防抖
    setTimeout(debounceFunc, 1000); //? 被防抖
    setTimeout(debounceFunc, 1500); //? 重置定时器 后面1000ms内无调用 执行里面的fn
    setTimeout(debounceFunc, 3500); //? 重置定时器 后面无调用 执行里面的fn
}

testDebounce();
/*
? 适用场景：
? 文本输入的验证，连续输入文字后发送 AJAX 请求进行验证，验证一次就好
? 按钮提交场景：防止多次提交按钮，只执行最后提交的一次
? 服务端验证场景：表单验证需要服务端配合，只执行一段连续的输入事件的最后一次，还有搜索联想词功能类似
 */
</script>
</body>
</html>
